<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
		<!-- 1 --><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 1 --><script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>实现路由案例</h1>
			<!-- a标签  超链接标签
					href属性：  请求跳转的地址
					<a href="https://www.baidu.com">百度</a>
					路由标签说明
					router-link  解析为a标签
					to  解析之后变为href属性
			 -->
			 <!-- 2 --><h1><router-link to="/home">主页</router-link></h1>
			 <!-- 3 --><router-view></router-view>
			 <!-- 指定路由填充位(占位符)
					需要给组件一个展现的位置
			  -->
		</div>
		<template id="homeTem">
			<div>
				<h1>傻逼</h1>
			</div>
		</template>
		<script>
			// 4 封装路由对象
			let homeCom = {
				template : "#homeTem"
			}
			let router = new VueRouter({
				//routes  定义请求与组件的映射关系
				routes: [
					{path : '/home', component : homeCom}
				]
			})
			
			/**
			 * 5 实现路由对象的绑定
			 */
			
			const app = new Vue({
				el : "#app",
				router
			})
		</script>
	</body>
</html>
